<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--潘天赐-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap-treeview.min.css"
          th:href="@{static/js/bootstrap/css/bootstrap-treeview.min.css}"
    >
    <script src="static/js/bootstrap/js/bootstrap-treeview.min.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap.addtabs.css">
    <script src="static/js/bootstrap/js/bootstrap.addtabs.min.js"></script>
    <link rel="stylesheet" href="static//js/bootstrap/css/bootstrap-table.min.css">
    <script src="static/js/bootstrap/js/bootstrap-table.min.js"></script>
    <script src="static/js/bootstrap/js/bootstrap-table-zh-CN.min.js"></script>
    <script src="static/js/bootstrap/js/bootbox.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap-datetimepicker.min.css" />
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="static/js/bootstrap-fileinput/js/fileinput.js"></script>
    <script src="static/js/bootstrap-fileinput/js/locales/zh.js"></script>
    <link rel="stylesheet" href="static/js/bootstrap-fileinput/css/fileinput.css">

</head>
<body>
<form id="myForm">
    <input type="hidden" th:value="${queryPictureId}" name="queryPictureId" class="form-control">
    <input type="hidden" th:value="${commonQueryId}" name="commonQueryId" class="form-control">
    <table class="table">
        <tr>
            <th>类目</th>
            <th>材料名称</th>
            <th>材料数量</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>
                <!--<input type="text" name="materialsType" class="form-control" style="width:150px;">-->
                <select class="selectpicker form-control" id="materialsTypeId" name="materialsType" style="width:150px;">
                    <option value="-1">请选择</option>
                </select>
            </td>
            <td><input type="text" name="materialsName" id="materialsName" class="form-control" style="width:150px;"></td>
            <td>
                <input type="text" name="materialsCount" id="materialsCount" onkeyup="yz_count()" placeholder="请输入正整数" class="form-control" style="width:150px;">
                <span style="color: #ff0000" id="span_count"></span>
            </td>
            <td><button type="button" onclick="deleteFile()" class="btn btn-link">删除</button></td>
        </tr>
    </table>
</form>
<br>
<button type="button" onclick="addPictureMaterials()" class="btn btn-primary">确认提交</button>
</body>
<script>
    $.ajax({
        url:"queryMaterialsType",  //查询类型表
        success:function(data){
            for (var i = 0; i < data.length; i++) {
                $("#materialsTypeId").append("<option value='"+data[i].materialsTypeId+"'>"+ data[i].materialsTypeName +"</option>");
            }
            $('.selectpicker').selectpicker('refresh');
            // 查询界面
            /*$("#materialsTypeId").append(opts);
            $("#materialsTypeId").selectpicker("refresh");*/
        }
    })

    //删除
    function deleteFile(){
        $("#materialsTypeId").val(-1);
        $("#materialsName").val("");
        $("#materialsId").val("");
        $("#materialsCount").val(0);
    }

    function addPictureMaterials(){
        $.ajax({
            url:"addPictureMaterials",
            data:$("#myForm").serialize(),//获取表单的值
            success:function(){
                alert("成功")
                //$("#myTable").bootstrapTable('refresh');//表格刷新
            }
        });
    }
    //验证数量是否为正整数
    function yz_count(){
        var materialsCount = $("#materialsCount").val()
        var span = $("#span_count")
        var reg = /^[1-9]\d*$/
        if (reg.test(materialsCount)){
            span.text("")
            return true
        }else{
            span.text("*请输入正整数")
            return false
        }
    }

</script>
</html>